<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
</head>

<body ng-app="">
<!--
    * 依赖对象：完成某个特定的功能需要某个对象才能实现，这个对象就是依赖对象。
    * 依赖注入：依赖的对象以形参的形式被注入进来使用，这种方式就是依赖注入。
    * angular的 ‘$scope’对象就是依赖对象，并且是依赖注入的形式进行使用。
      ！！！形参必须是特定的名称, 否则Angular无法注入抛异常

    * 回调函数的event的就是依赖对象
    * 回调函数有形参就是依赖注入
-->
<div ng-controller="MyController">
  <input type="text" placeholder="姓" ng-model="firstName">
  <input type="text" placeholder="名" ng-model="lastName">

  <p>输入的姓名为: {{firstName+'-'+lastName}}</p>
  <p>输入的姓名2为: {{getName()}}</p>
</div>

<div>
  {{firstName}} <!--不能显示-->
</div>
<script type="text/javascript" src="../../js/angular-1.2.29/angular.js"></script>
<script type="text/javascript">
  function MyController ($scope) {//必须是$scope, $scope就是依赖对象, 被angular动态注入的
    $scope.firstName = 'KB';
    $scope.lastName = 'Brent';

    //给域对象指定方法
    $scope.getName = function() {
      return $scope.firstName + "  " + $scope.lastName;
    };
    console.log($scope.age);

    //声明式和命令式的区别
    //1.命令式：命令程序执行的时候每一步都是按照自己的指令，更注重执行的过程
    //2.声明式：更注重执行的结果。
    //命令式
    var arr = [1,2,3,4,5];
    var newArr = [];
    for(var i=0;i<arr.length;i++){
      var num = arr[i]*2;
      newArr.push(num);
    }
    console.log(newArr);

    //声明式
    var newArr2 = arr.map(function (item) {
      return item*2;
    });
    console.log(newArr2);
    //命令式更注重的执行的过程
    //声明式更注重的执行的结果
    //声明式是对命令式的局部包装
    //解答题与填空题的区别
  }
</script>

<script type="text/javascript">
    document.getElementById('btn').onclick = function(event) {
        alert(event.clientX);
    };
</script>
</body>
</html>